import React,{useState,useEffect} from "react";
import { Form, Input, Button, Select, Spin,message } from "antd";
import { userReg,userRoleList } from "../../api/user";
import { $http,request } from "../../utils/request";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

const UserManager = () => {
  const [form] = Form.useForm();
  let [loading,setLoading] = useState(false)
  let [roleList,setRoleList] = useState([])

  useEffect(()=>{
    userRoleList().then(res=>{
      setRoleList(res.data.results)
    })
  },[])

  const onFinish = (values) => { //表单提交
    console.log(values);
    setLoading(true)
    userReg(values).then(res=>{
      setLoading(false)
    })
  };

  const onReset = () => { //重置表单
    form.resetFields();
  };

  return (
    <Spin spinning={loading}>
      <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
        <Form.Item
          name="username"
          label="账号名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="password"
          label="默认密码"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input type="password"/>
        </Form.Item>
        <Form.Item
          name="rolecode"
          label="账号角色"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select placeholder="请选择用户角色">
            {
              roleList.map(item=>{
                return <Option value={item.rolecode} key={item.objectId}>
                  {item.rolename}
                </Option>
              })
            }
          </Select>
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            发布
          </Button>
          <Button htmlType="button" onClick={onReset}>
            重置
          </Button>
          {/* <Button type="primary" ghost onClick={handleCfy}>
            转存
          </Button> */}
        </Form.Item>
      </Form>
    </Spin>
  );
};

export default UserManager;
